<script setup lang="ts">
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { regYuanToFen, timeFormat, timeStamp } from '@/hooks/util'
import cascader from '@/hooks/cascader.ts'
import * as accountApi from '@/api/account'
import * as fishApi from '@/api/fishGoods'
import { message } from 'ant-design-vue'
import { useUserStore } from '@/store/modules/user'
import ImgView from './ImgView.vue'
import categoryTreeOption from '@/assets/categoryTree.ts'
import * as physicalApi from '@/api/physical'

import 'dayjs/locale/zh-cn'

const themeStyle = {
  backgroundColor: localStorage.getItem('local_theme') || '#1890FF',
}
const route = useRoute()
const router = useRouter()
const userStore = useUserStore()
const imgViewRef = ref()

const myModal = ref()
const showModal = () => {
  myModal.value?.showModal()
}

defineExpose({
  showModal,
})

const emit = defineEmits<{
  refresh: []
}>()

let spinning = ref<boolean>(false)

const labelCol = {
  style: { width: '100px', textAlign: 'center' },
}
const wrapperCol = { span: 10 }

const formRef = ref()
interface formState {
  divisionId?: Array<string>
  robotId?: number
  images?: string
  sellingPrice?: number
  originalPrice?: number
  fineness?: number
  title?: string
  desc?: string
  inventory?: number
  transportFee?: number
  timePush?: any
  categoryTreeTarget?: any
}
const formState = ref<formState>({})

import type { RuleObject } from 'ant-design-vue/es/form/interface'
let validateChangeBalance = async (rule: RuleObject, value: string) => {
  value = String(value)
  if (value == null || value.trim() === '') {
    return Promise.reject('金额不能为空')
  }
  // 使用正则表达式来验证金额格式，允许整数和小数点后两位
  const regex = /^\d+(\.\d{1,2})?$/
  if (!regex.test(value)) {
    return Promise.reject('请输入有效的金额（整数或小数点后两位）')
  }
  // 将字符串转换为数字并检查是否大于0
  const amount = parseFloat(value)
  if (isNaN(amount) || amount <= 0) {
    return Promise.reject('请输入大于0的金额')
  }
  // 如果一切正常，返回成功
  return Promise.resolve()
}

import type { Rule } from 'ant-design-vue/es/form'
const rules: Record<string, Rule[]> = {
  spBizType: [{ required: true, message: '请选择行业名称', trigger: 'blur' }],
  categoryId: [{ required: true, message: '请选择宝贝类目', trigger: 'blur' }],
  channelId: [{ required: true, message: '请选择宝贝渠道', trigger: 'blur' }],
  divisionId: [{ required: true, message: '请选择地区', trigger: 'blur' }],
  robotId: [{ required: true, message: '请选择店铺', trigger: 'blur' }],
  sellingPrice: [{ required: true, validator: validateChangeBalance, trigger: 'blur' }],
  originalPrice: [{ required: true, validator: validateChangeBalance, trigger: 'blur' }],
  title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
  desc: [{ required: true, message: '请输入描述', trigger: 'blur' }],
  inventory: [{ required: true, message: '请输入库存', trigger: 'blur' }],
  transportFee: [{ required: true, message: '请输入邮费', trigger: 'blur' }],
}

import type { SelectProps } from 'ant-design-vue'

// 行业名称
let spBizType = ref<string>('')
const industryList = ref<SelectProps['options']>([])
const selectIndustry = (selectValue: any) => {
  spBizType.value = selectValue as string
  getCategoryList(spBizType.value)
}

// 宝贝类目
let categoryId = ref<string>('')
const categoryList = ref<SelectProps['options']>([])
const selectCategory = (selectValue: any) => {
  categoryId.value = selectValue as string
  getChannelList(categoryId.value)
}

// 宝贝渠道
const channelList = ref<SelectProps['options']>([])

// 地区
let cascaderValue = ref<string[]>([])
const cascaderChange = (value: any[], selectedOptions: any[]) => {
  cascaderValue.value = value
}
const filter = (inputValue: string, path: any[]) => {
  return path.some(option => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1)
}

const handleSubmit = async () => {
  formRef.value.validate().then(async () => {
    console.log('formState=', formState.value)

    // const date = new Date(formState.value.timePush)
    // const timestamp = date.getTime()
    // console.log('timePush=', timestamp)

    let param = {
      // spBizType: formState.value.spBizType,
      // categoryId: formState.value.categoryId,
      // channelId: formState.value.channelId,
      divisionId: formState.value.divisionId[formState.value.divisionId.length - 1],
      robotId: formState.value.robotId,
      sellingPrice: regYuanToFen(Number(formState.value.sellingPrice), 100),
      originalPrice: regYuanToFen(Number(formState.value.originalPrice), 100),
      title: formState.value.title,
      desc: formState.value.desc,
      inventory: formState.value.inventory,
      imgList: imgList.value,
      transportFee: regYuanToFen(formState.value.transportFee, 100),
      pvDTOList: productAttributeValues.value,
      fishCateId: lastLevel.value,
      fineness: formState.value.fineness,
    }
    spinning.value = true
    try {
      let { state, message: msg } = await fishApi.putAwayNewProduct(param)
      if (state === 200) {
        message.success('发布成功')
        myModal.value.cancelModal()
        setTimeout(() => {
          emit('refresh')
        }, 1000)
      } else {
        message.error(msg)
      }
    } catch (error) {
      message.error('网络请求连接失败~')
    }
    spinning.value = false
  })
}




// 获取闲鱼店铺
const robatList = ref([])

const handleChangeRadio = (e: any) => {
  formState.value.robotId = e.target.value
}
const getRobatList = async () => {
  const params = { currentPage: 1, pageSize: 100 }
  try {
    let { state, data, message: msg } = await accountApi.getFishRobotList(params)
    if (state === 200) {
      robatList.value = data.list.map((item: any) => {
        return {
          label: item.nickName,
          value: item.id,
        }
      })
    } else {
      message.error(msg)
    }
  } catch (error) {
    message.error('网络请求连接失败~')
  }
}

// 宝贝图片
const imgList = ref<Array<string>>([
  // 'http://img.alicdn.com/bao/uploaded/i3/O1CN01oxEg4c1vLxY6mSogr_!!3-fleamarket.bmp',
])
interface FileItem {
  uid: string
  name?: string
  status?: string
}
const fileList = ref<FileItem[]>([])
const handleBeforeUpload = (file: any, fileList: any) => {
  return true
}

const customRequest = (option: any) => {
  const { onSuccess, onError, file, action, data = {} } = option
  const formData = new FormData()
  formData.append('file', file)
  formData.append('type', '1')
  fetch(action, {
    headers: {
      // 'User-Token': userStore.token,
      'User-Token': localStorage.getItem('token') as any,
    },
    method: 'POST',
    body: formData,
  })
    .then(response => response.json())
    .then(result => {
      onSuccess(result, file)
      if (result && result.data != null) {
        imgList.value.push(result.data)
      } else {
        message.error('图片太大，上传失败了!')
        fileList.value.pop()
      }
    })
    .catch(error => {
      message.error('图片太大，上传失败了')
      onError(error)
    })
}

// 预览图片
const handlePreview = async (file: any) => {
  if (file && file.response) {
    imgViewRef.value.showModal([file.response.data])
  } else {
    message.error('预览失败！')
  }
}

// 删除图片
const handleRemove = (file: any) => {
  if (file.status != 'error') {
    imgList.value = imgList.value.filter(item => item != file.response.data)
  }
}

interface FileInfo {
  file: FileItem
  fileList: FileItem[]
}
const handleChange = ({ fileList: newFileList }: FileInfo) => {
  fileList.value = newFileList.map((item: any) => {
    if (item.response && item.response.result == false) {
      return {
        uid: '-5',
        name: 'image.png',
        status: 'error',
      }
    } else {
      return item
    }
  })
}

let imgUploadUrl = ref('')
onMounted(() => {
  // 回显
  formState.value.categoryTreeTarget = [
    18,
    '91cb2286b4bd6d5b22b3139b32ea0556',
    'a5fe2de42b13cd9aac1a13d97f8e7bd4',
    '65f5bdcd031bf26d267e0a01017d9f44',
  ]
  // console.log('闲管家全行业类目树categoryTreeOption=', categoryTreeOption)

  imgUploadUrl.value = `${localStorage.getItem('baseUrl')}/platform/wechatReply/uploadToAliOss`
  // getIndustryList()
  getRobatList()
  categoriesList()
  // getCateGoryList()
  document.addEventListener('click', function (event) {
    const modal = document.getElementById('selectedBox')
    const modal1 = document.getElementById('selectediptBox')

    // 先检查是否点击了attribute-more-btn
    if (!event.target.closest('.attribute-more-btn')) {
      closeAllPopups()
    }

    // 安全地检查点击是否在弹框内
    const isClickInsideModal = modal && modal.contains(event.target)
    const isClickInsideModal1 = modal1 && modal1.contains(event.target)

    // 只有当modal存在时才操作
    if (modal) {
      if (!isClickInsideModal && !isClickInsideModal1) {
        // 点击的是弹框外部，关闭弹框
        modal.style.display = 'none'
      } else {
        // 点击的是弹框内部，保持显示
        modal.style.display = 'flex'
      }
    }
  })
})

import type { ShowSearchType } from 'ant-design-vue/es/cascader'
const categoryTreeFilter: ShowSearchType['filter'] = (inputValue, path) => {
  return path.some(option => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1)
}

const changeTree = (val: any, option: any) => {
  console.log('val=', val)
  console.log('option=', option)
}



const level1Categories = ref([])
const level2Categories = ref([])
const level3Categories = ref([])
const level4Categories = ref([])

const handSelectedArr = ref([
  {
    id: 1,
    flag: false
  },
  {
    id: 0,
    flag: false
  },
  {
    id: 0,
    flag: false
  },
  {
    id: 0,
    flag: false
  }
])
const cateGoryTitle = ref("") //分类搜索字段
const isShowSelectedDom = computed(() => {
  return handSelectedArr.value.some(item => item.flag)
})
const debounceTimer = ref(null)
watch(cateGoryTitle, (newValue, oldValue) => {
  if (!newValue) {
    isSearchBox.value = false
    return
  }
  clearTimeout(debounceTimer.value)
  debounceTimer.value = setTimeout(() => {
    onSearch()
  }, 500)

})

const onSearch = async () => {
  if (!cateGoryTitle.value) {
    return
  }
  try {
    const result = await physicalApi.getCateGoryList({ key: cateGoryTitle.value })
    if (result.state == 200) {
      console.log(result, 'result')
      searchList.value = result.data
      isSearchBox.value = true
      handSelectedArr.value.forEach(element => {
        element.flag = false
      })
    } else {

    }
  } catch (error) {

  }
}

const handleFocus = () => {
  if (cateGoryTitle.value.split('/').length == 4) {
    handSelectedArr.value.map(item => (item.flag = true))
  }
  handSelectedArr.value[0].flag = true
}

// 分类选择变化
const handleLevelChange = (level, item) => {
  console.log(level, item)
  handSelectedArr.value[level + 1].id = item.id
  handSelectedArr.value[level + 1].flag = true

  if (level == 0) {
    level2Categories.value = []
    level3Categories.value = []
    level4Categories.value = []
  } else if (level == 1) {
    level3Categories.value = []
    level4Categories.value = []
  } else if (level == 2) {
    level4Categories.value = []
  }
  // 获取下级分类
  if (handSelectedArr.value[level + 1]) {
    fetchSubCategories(level + 1, handSelectedArr.value[level + 1].id)
  }
}
//  获取分类列表
const categoriesList = async () => {
  try {
    const res = await physicalApi.getFirstbizTypeList()
    if (res.state == 200) {
      level1Categories.value = res.data
    }
  } catch (error) {
    // this.$message.error('获取分类失败')
    console.log(error)
  }
}
//  
// 获取下级分类
const fetchSubCategories = async (level, parentId) => {
  console.log(level, parentId, 'level, parentId')
  // this.loading[level] = true
  try {
    const res = await physicalApi.getCateGoryList({ parentCateId: parentId })
    if (level == 1) {
      level2Categories.value = res.data
    } else if (level == 2) {
      level3Categories.value = res.data
    } else if (level == 3) {
      level4Categories.value = res.data
    }
  } catch (error) {
    // $message.error(`获取${level + 2}级分类失败`)
    console.error(error)
  }
}
const lastLevel = ref(0) //四级联动最后一级
const isSearchBox = ref(false)


const handleSelectedChange = (e) => {
  console.log(e, 'e')
  lastLevel.value = e.id
  GetatherAttributeValues({ cateId: e.id })
  handSelectedArr.value.map(item => (item.flag = false))
  // console.log(handSelectedArr.value, 'handSelectedArr.value');
  // console.log(level2Categories.value, level3Categories.value, level4Categories.value,"level2Categories.value, level3Categories.value, level4Categories.value");


  const f1 = level1Categories.value.filter(item => item.id == handSelectedArr.value[1].id)
  const f2 = level2Categories.value.filter(item => item.id == handSelectedArr.value[2].id)
  const f3 = level3Categories.value.filter(item => item.id == handSelectedArr.value[3].id)
  // const f4 = level4Categories.value.filter(item => item.id == handSelectedArr.value[3].id)

  // console.log(f1, f2, f3, e,'f1, f2, f3');
  const fullNmae = f1[0].channelCatName + '/' + f2[0].channelCatName + '/' + f3[0].channelCatName + '/' + e.channelCatName
  console.log(fullNmae, 'fullNmae');


  cateGoryTitle.value = fullNmae
  console.log(cateGoryTitle.value, 'cateGoryTitle.value');

  setTimeout(() => {
    isSearchBox.value = false
  }, 1000)
}
const searchList = ref([])


const ProductAttributes = ref([])
const ProductAttributesLength1 = ref(0)
const ProductAttributesLength2 = ref(0)
const productAttributeValues = ref([])


//获取分类属性
const GetatherAttributeValues = async (data: any) => {
  try {
    const res = await physicalApi.GetFishPvList(data)
    if (res.state == 200) {
      console.log(res, 'res')
      ProductAttributes.value = res.data.map(item => {
        return {
          ...item,
          searchValues: "",
          copyValues: item.valueList
        }

      })
      ProductAttributesLength1.value = res.data.length
    } else {
      // $message.error(res.msg)
    }
  } catch (error) {
    // this.$message.error(`获取${level + 2}级分类失败`)
  }
}

const getChildrenAttributes = async (data) => {
  try {
    const res = await physicalApi.getFishPvChildrenList(data)
    if (res.state == 200) {
      console.log(res, 'res')
      return res.data
    } else {
      // $message.error(res.msg)
    }
  } catch (error) {
    // this.$message.error(`获取${level + 2}级分类失败`)
  }

}

//搜索
const handleSearch = (item) => {
  cateGoryTitle.value = item.fullName
  GetatherAttributeValues({ attrId: 0, cateId: item.id, valueId: 0 })
  setTimeout(() => {
    isSearchBox.value = false
  }, 1000)
}
const attributeValues = ref('') //自带选择框


const selectAttribute = async (attribute, attrIndex, valueIndex) => {
  console.log(attribute, attrIndex, valueIndex, "attribute, attrIndex, valueIndex");
  // attribute.valueList[valueIndex].selected = !attribute.valueList[valueIndex].selected
  console.log(attribute, attrIndex, valueIndex, "attribute, attrIndex, valueIndex");

  // 先重置该属性下所有值的选中状态
  ProductAttributes.value[attrIndex].valueList.forEach(value => {
    value.selected = false;
  });

  // 检查当前点击的值是否已经选中
  const currentValue = ProductAttributes.value[attrIndex].valueList[valueIndex];
  if (currentValue.selected) {
    // 如果已经选中，则取消选中状态，并从 productAttributeValues 中移除对应的项
    currentValue.selected = false;

    // 查找并移除 productAttributeValues 中对应的项
    const existingIndex = productAttributeValues.value.findIndex(
      item => item.propertyId === attribute.propertyId && item.channelAttrValueId === currentValue.valueId
    );
    if (existingIndex !== -1) {
      productAttributeValues.value.splice(existingIndex, 1);
    }

    return; // 直接返回，因为已经取消选择了
  }

  // 设置当前选中值
  currentValue.selected = true;

  if (attribute.showSubProperty) {
    var sonAttribute = [];
    sonAttribute.push(attribute.valueList[valueIndex].valueId);
    const result = await getChildrenAttributes({
      propertyId: attribute.propertyId,
      cateId: lastLevel.value,
      valueId: attribute.valueList[valueIndex].valueId
    });
    if (result.length) {
      ProductAttributes.value = ProductAttributes.value.filter(item => item.name != result[0].name);
      ProductAttributes.value.splice(attrIndex + 1, 0, ...result);
      ProductAttributesLength2.value = ProductAttributes.value.length;
    } else {
      if (ProductAttributesLength2.value - ProductAttributesLength1.value == 1) {
        ProductAttributes.value.splice(attrIndex + 1, 1);
        ProductAttributesLength2.value = ProductAttributes.value.length;
      }
    }
  }

  // 查找是否存在相同 attrId 的项
  const existingIndex = productAttributeValues.value.findIndex(item => item.propertyId === attribute.propertyId);

  if (existingIndex !== -1) {
    // 如果存在相同类型的 attrId，则移除旧的项
    productAttributeValues.value.splice(existingIndex, 1);
  }

  // 添加新的选择项
  productAttributeValues.value.push({
    channelAttrId: attribute.propertyId,
    channelAttrName: attribute.name,
    channelAttrValueId: attribute.valueList[valueIndex].valueId,
    channelAttrValue: attribute.valueList[valueIndex].valueName
  });

}

const handleSearchAttr = (item: any) => {
  activeAttributeId.value = item.propertyId // 设置当前激活的属性ID
}
const activeAttributeId = ref(null)

const closeAllPopups = () => {
  activeAttributeId.value = null // 关闭所有弹窗
}
const onSearchKeyUp = (item) => {
  console.log(item, "item");
  let keyword = item.searchValues
  if (!keyword) {
    item.copyValues = item.valueList
  }
  if (keyword) {
    const resultArr = item.copyValues.filter((item, index) => item.valueName.indexOf(keyword) > -1)
    item.copyValues = resultArr
  }
}
const changeMoreItem = (moreItem: any, moreIndex: any, attribute: any) => {
  closeAllPopups()
  let attrArray = attribute.valueList.slice(0, 10)
  let isHas = attrArray.filter((item: any) => item.valueId == moreItem.valueId)
  if (isHas.length) {
    attrArray.forEach((element: any) => {
      if (element.valueId == moreItem.valueId) {
        element.selected = true
      } else {
        element.selected = false
      }
    })
  } else {
    attrArray.forEach(item => {
      item.selected = false
    })
    moreItem.selected = true
    attribute.valueList[attrArray.length - 1] = moreItem
  }
  // selectAttribute(attribute, index, moreIndex)
}
const resetSelectedAttribute = (item, index) => {
  console.log(item, index, "item,index");
  item.valueList.forEach((element: any) => {
    element.selected = false
  })
  item.copyValues = item.valueList


}
const quailtyList = ref([
  {
    label: '全新',
    value: 100,
  },
  {
    label: '准新',
    value: 99.9,
  },
  {
    label: '99新',
    value: 99,
  },
  {
    label: '95新',
    value: 95,
  },
  {
    label: '9新',
    value: 90,
  },
  {
    label: '8新',
    value: 80,
  },
  {
    label: '7新',
    value: 70,
  },
  {
    label: '6新',
    value: 60,
  },
  {
    label: '5新及以下',
    value: 50,
  },
])
</script>

<template>
  <MyModal ref="myModal" title="发布宝贝" :width="900">
    <template #content>
      <a-spin tip="Loading..." :spinning="spinning">
        <a-form style="height: 500px; overflow-y: scroll" ref="formRef" :rules="rules" :model="formState"
          :label-col="labelCol" :wrapper-col="wrapperCol">
          <a-alert description="提醒：由于当前商品发布功能正在调整更新，无法设置不同品类的的属性信息，推荐使用闲鱼app发布商品，发布后选择闲鱼账号，点击“同步当前闲鱼账号宝贝”" type="info"
            banner style="margin-bottom: 10px; padding: 10px" />

          <div style="margin-bottom: 20px">
            <span class="titleFlag" :style="themeStyle"></span>
            <span class="title">基本信息</span>
          </div>

          <div class="goods-special">
            <div class="hand-selected-container">
              <div class="box" id="selectediptBox">
                <a-input v-model:value="cateGoryTitle" placeholder="选择商品类目" class="ipt-style"
                  style="color: #999;padding:0 50px;cursor: pointer;" @focus="handleFocus" />
                <SearchOutlined
                  style="color: #999;;font-size: 18px;position: absolute;left: 18px;top: 70%;transform: translateY(-70%);" />
                <CaretDownOutlined
                  style="color: #999;font-size: 18px;position: absolute;right: 3%;top: 70%;transform: translateY(-70%);" />
              </div>
              <div class="selected-box" v-if="isShowSelectedDom" id="selectedBox">
                <div class="selected-1 sleect-style" v-if="level1Categories.length && handSelectedArr[0].flag">
                  <div class="item" v-for="( item, index ) in  level1Categories " @click="handleLevelChange(0, item)"
                    :key="item.id">
                    <div class="item-name">{{ item.channelCatName }}</div>
                    <!-- <a-icon type="right" style="color: #999;;font-size: 12px;" /> -->
                    <RightOutlined style="color: #999;;font-size: 12px;" />
                  </div>
                </div>
                <div class="selected-2 sleect-style" v-if="level2Categories.length && handSelectedArr[1].flag">
                  <div class="item" v-for="( item, index ) in  level2Categories " @click="handleLevelChange(1, item)"
                    :key="item.id">
                    <div class="item-name">{{ item.channelCatName }}</div>
                    <RightOutlined style="color: #999;;font-size: 12px;" />
                  </div>
                </div>
                <div class="selected-3 sleect-style" v-if="level3Categories.length && handSelectedArr[2].flag">
                  <div class="item" v-for="( item, index ) in  level3Categories " @click="handleLevelChange(2, item)"
                    :key="item.id">
                    <div class="item-name">{{ item.channelCatName }}</div>
                    <RightOutlined style="color: #999;;font-size: 12px;" />
                  </div>
                </div>
                <div class="selected-4 sleect-style" v-if="level4Categories.length && handSelectedArr[3].flag">
                  <div class="item" v-for="( item, index ) in  level4Categories " @click="handleSelectedChange(item)"
                    :key="item.id">
                    <div class="item-name">{{ item.channelCatName }}</div>
                    <RightOutlined style="color: #999;;font-size: 12px;" />
                    <!-- <a-icon type="right" style="color: #999;;font-size: 12px;" /> -->
                  </div>
                </div>
              </div>
              <div class="search-box" v-if="isSearchBox" id="searchBox">
                <div class="search-item" v-if="searchList.length" @click="handleSearch(item)"
                  v-for=" item  in  searchList " :key="item.id">
                  {{ item.fullName }}
                </div>
                <div v-else class="search-text">无匹配数据</div>
              </div>
            </div>
            <div class="product-attributes-container">
              <div class="attributes-item" v-for="( attribute, index ) in  ProductAttributes " :key="index">
                <div class="attribute-name">{{ attribute.name }}</div>
                <div class="attribute-values-container">
                  <div class="attribute-value" v-for="( value, valueIndex ) in  attribute.valueList.slice(0, 10) "
                    :class="{ selected: value.selected }" @click="selectAttribute(attribute, index, valueIndex)"
                    :key="valueIndex">
                    {{ value.valueName }}
                  </div>
                  <div class="attribute-more-btn">
                    <a-input type="text" :placeholder="`${attribute.name}`"
                      style="color: #999;padding:0 20px;cursor: pointer;width: 150px;height:30px;text-align: center;border-radius: 18px;font-size: 12px;background-color: #f9f9f9;"
                      v-model:value="attribute.searchValues" @focus="handleSearchAttr(attribute)"
                      @keyup="onSearchKeyUp(attribute)" />

                    <SearchOutlined
                      style="color: #999;;font-size: 14px;position: absolute;left: 18px;top: 50%;transform: translateY(-50%);" />
                    <CaretDownOutlined
                      style="color: #999;font-size: 14px;position: absolute;left: 82%;top: 50%;transform: translateY(-50%);" />


                    <div class="attribute-more" :id="`attrMoreBox${attribute.propertyId}`"
                      :style="{ visibility: activeAttributeId === attribute.propertyId ? 'visible' : 'hidden' }">
                      <div class="attribute-more-item" @click="changeMoreItem(moreItem, moreIndex, attribute)"
                        v-for="( moreItem, moreIndex ) in  attribute.copyValues " :key="moreIndex">
                        {{ moreItem.valueName }}
                      </div>
                    </div>
                  </div>
                  <a-button type="default" round @click="resetSelectedAttribute(attribute, index)">重置</a-button>
                </div>
              </div>
            </div>
          </div>
          <div style="height: 20px"></div>

          <a-form-item label="地区" name="divisionId">
            <a-cascader v-model:value="formState.divisionId" :options="cascader" :show-search="{ filter }"
              @change="cascaderChange" placeholder="地区" />
          </a-form-item>

          <div style="margin-bottom: 20px">
            <span class="titleFlag" :style="themeStyle"></span>
            <span class="title">发布的闲鱼店铺</span>
          </div>

          <a-form-item label="闲鱼店铺" name="robotId">
            <a-radio-group v-model:value="formState.robotId" :options="robatList" @change="handleChangeRadio"
              class="selectShop" />
          </a-form-item>

          <div style="margin-bottom: 20px">
            <span class="titleFlag" :style="themeStyle"></span>
            <span class="title">宝贝信息</span>
          </div>

          <!-- 
            action="http://ticket-expert-api.liangpiaovip.com/platform/wechatReply/uploadToAliOss"
            action="http://k8s-cluster.liangpiaovip.com:30080/ticket-expert/platform/wechatReply/uploadToAliOss"
           -->
          <a-form-item has-feedback name="images" label="宝贝图片">
            <a-upload :multiple="true" list-type="picture-card" :action="imgUploadUrl"
              :show-upload-list="{ showRemoveIcon: true }" :beforeUpload="handleBeforeUpload"
              :customRequest="customRequest" @preview="handlePreview" @remove="handleRemove" @change="handleChange"
              :file-list="fileList">
              <upload-outlined></upload-outlined>
              上传图片
            </a-upload>
          </a-form-item>

          <a-form-item label="宝贝标题" name="title">
            <a-input v-model:value="formState.title"></a-input>
          </a-form-item>
          <a-form-item label="宝贝标题" name="title">
            <a-select v-model:value="formState.fineness" placeholder="请选择商品成色" allowClear style="width: 250px">
              <a-select-option v-for="(item, index) in quailtyList" :key="index" :value="item.value">
                {{ item.label }}
              </a-select-option>
            </a-select> </a-form-item>



          <a-form-item label="描述" name="desc">
            <a-textarea v-model:value="formState.desc" style="width: 500px; max-height: 260px"
              :maxlength="1000"></a-textarea>
          </a-form-item>

          <a-form-item has-feedback label="售价" name="sellingPrice">
            <a-input-number v-model:value="formState.sellingPrice" style="width: 70%"></a-input-number>
          </a-form-item>

          <a-form-item has-feedback label="原价" name="originalPrice">
            <a-input-number v-model:value="formState.originalPrice" style="width: 70%"></a-input-number>
          </a-form-item>

          <a-form-item has-feedback label="库存" name="inventory">
            <template #help>如您店铺未开通鱼小铺，只能设置库存为1，否则会上品失败</template>
            <a-input-number max="9999" v-model:value="formState.inventory" style="width: 70%"></a-input-number>
          </a-form-item>
          <a-form-item has-feedback label="邮费" name="transportFee">
            <a-input-number v-model:value="formState.transportFee" style="width: 70%"></a-input-number>
          </a-form-item>

          <!-- 定时发布 -->
          <!-- <a-form-item has-feedback label="定时发布" name="timePush">
            <a-date-picker v-model:value="formState.timePush" showTime :locale="locale" />
          </a-form-item> -->
          <!-- 定时发布 -->
        </a-form>
        <div style="
            border-top: 1px solid #f0f0f0;
            text-align: right;
            padding-top: 10px;
            padding-right: 10px;
          ">
          <a-button @click="() => myModal.cancelModal()" style="margin-right: 10px">取消</a-button>
          <a-button type="primary" @click="handleSubmit">确定</a-button>
        </div>
      </a-spin>
    </template>
  </MyModal>
  <ImgView ref="imgViewRef"></ImgView>
</template>

<style scoped lang="less">
.titleFlag {
  display: inline-block;
  width: 4px;
  height: 16px;
  margin-right: 4px;
  // background-color: #7417be;
  border-radius: 2px;
}

.title {
  font-weight: bold;
  font-size: 16px;
}

.shop {
  display: inline-block;
  padding: 0 10px;
  height: 40px;
  line-height: 40px;
  border-radius: 20px;
  border: 1px solid #ebebeb;
  margin-right: 10px;
  margin-bottom: 5px;
}

.product-attributes-container {
  width: 100%;
  background-color: #f8f9fa;
  padding: 20px;
  box-sizing: border-box;
  border-radius: 8px;
  margin-top: 20px;
}

.attributes-item {
  display: flex;
  margin-bottom: 20px;
  align-items: flex-start;

  &:last-child {
    margin-bottom: 0;
  }
}

.attribute-name {
  font-weight: 600;
  font-size: 14px;
  color: #333;
  width: 120px;
  min-width: 120px;
  padding-top: 8px;
}

.attribute-values-container {
  display: flex;
  flex-wrap: wrap;
  flex: 1;
  gap: 12px;
}

.attribute-more-btn {
  position: relative;

  .attribute-more {
    position: absolute;
    visibility: hidden;
    top: 40px;
    left: 5px;
    background-color: #fff;
    max-height: 300px;
    height: 260px;
    overflow-y: auto;
    width: 100%;
    z-index: 99;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 8px;
    border: 1px solid #e8e8e8;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;

    .attribute-more-item {
      width: 100%;
      padding: 12px;
      font-weight: 500;
      font-size: 13px;
      color: #333;
      cursor: pointer;
      transition: all 0.3s ease;

      &:hover {
        background-color: #f0f2f5;
      }
    }
  }
}

.attribute-value {
  font-size: 13px;
  border: 1px solid #e8e8e8;
  border-radius: 20px;
  padding: 6px 16px;
  background-color: #fff;
  color: #333;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.3s ease;

  &:hover {
    border-color: #1890ff;
    color: #1890ff;
  }
}

.attribute-value.selected {
  border-color: #1890ff;
  background-color: #e6f7ff;
  color: #1890ff;
  font-weight: 500;
}

.goods-special {
  margin-top: 25px;

  .hand-selected-container {
    position: relative;

    .box {
      position: relative;
    }

    .ipt-style {
      max-width: 100%;
      margin-top: 20px;
      height: 45px;
      border-radius: 30px;
      padding: 0 30px;
      border: 1px solid #e8e8e8;
      transition: all 0.3s ease;

      &:hover,
      &:focus {
        border-color: #1890ff;
      }
    }

    .search-box {
      position: absolute;
      top: 80px;
      left: 0;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      border-radius: 8px;
      background-color: #fff;
      max-height: 260px;
      overflow-y: auto;
      border: 1px solid #e8e8e8;
      width: 100%;
      z-index: 99;
      display: flex;
      align-items: left;
      flex-direction: column;
      padding: 8px;

      .search-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 15px;
        color: #333;
        transition: all 0.3s ease;

        &:hover {
          background-color: #f0f2f5;
          cursor: pointer;
        }
      }

      .search-text {
        padding: 15px;
        text-align: center;
        font-size: 14px;
        color: #999;
      }
    }

    .selected-box {
      position: absolute;
      top: 70px;
      left: 0;
      height: 520px;
      width: 80%;
      z-index: 99;
      display: flex;
      align-items: center;
      gap: 8px;

      .sleect-style {
        border: 1px solid #e8e8e8;
        height: 100%;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        border-radius: 8px;
        background-color: #fff;
      }

      .selected-1,
      .selected-2,
      .selected-3,
      .selected-4 {
        overflow-y: auto;

        .item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 10px 15px;
          color: #333;
          transition: all 0.3s ease;

          &:hover {
            background-color: #f0f2f5;
            cursor: pointer;
          }
        }
      }

      .selected-1,
      .selected-2,
      .selected-3,
      .selected-4 {
        width: 30%;
      }
    }
  }
}

/deep/ .ant-checkbox-group-item {
  padding: 0 10px;
  height: 40px;
  line-height: 40px;
  border-radius: 20px;
  border: 1px solid #ebebeb;
  margin-right: 10px;
  margin-bottom: 5px;
}

/deep/ .ant-checkbox-inner,
.ant-checkbox-input {
  border-radius: 50%;
}

/deep/ .ant-upload-list {
  width: 660px;
  font-feature-settings: 'tnum';
  box-sizing: border-box;
  color: rgba(0, 0, 0, 0.85);
  font-size: 14px;
  font-variant: tabular-nums;
  line-height: 1.5715;
  list-style: none;
  margin: 0;
  padding: 0;
}
</style>
